<template>
	<div class="app-container" style="background: #f8f8f9;">
		<div ref="box1" class="flex-center margin-bottom-10">
			<el-radio-group v-model="searchParams.openingState" size="large" class="item-gap" @change="onOpeningStateChange">
				<el-radio-button v-for="item in openStateList" :key="item.id" :label="item.id">
					<el-badge v-if="item.id < 4 && item.count > 0" :value="item.count" :max="99">
						<div class="margin-right-20 custom-radio-style">{{ item.operationName }}</div>
					</el-badge>
					<div v-else class="margin-right-10 custom-radio-style" style="padding-bottom: 2px;">{{ item.operationName }}</div>
				</el-radio-button>
			</el-radio-group>
		</div>
		<jk-operation-card ref="box2" class="margin-bottom-10">
			<div class="flex-between-center-wrap">
				<div class="flex-start-center-wrap">
					<div class="item-gap"><el-button icon="el-icon-back" :size="size" type="default" plain @click="onBackBtn">返回列表页</el-button></div>
					<div class="item-gap"><el-button icon="el-icon-top-left" :size="size" type="default" plain @click="onJumpBtn('afterBigScreen')">前往后纺</el-button></div>
					<div class="item-gap"><el-button icon="el-icon-tickets" :size="size" type="default" plain @click="onJumpBtn('ForeSpinningPlan')">前纺计划</el-button></div>
					<div class="item-gap"><el-button icon="el-icon-view" :size="size" type="default" plain @click="drawerState = true">查看班产</el-button></div>
					<div class="item-gap"><el-button :icon="!isBatch ? 'el-icon-edit-outline' : 'el-icon-close'" :size="size" type="default" plain @click="onToggleBatch">{{ isBatch ? '关闭批量操作' : '批量操作' }}</el-button></div>
				</div>
				<div class="flex-end-center-wrap">
					<jk-select v-model="searchParams.workshopId" :option-list="workshopList" placeholder="区域" :clearable="false" :size="size" class="search-bar-item-size2 margin-5-0 item-gap"></jk-select>
					<jk-search-input v-model="searchParams.productNameOrCode" placeholder="品种名称" :size="size" class="search-bar-item-size3 margin-5-0 item-gap" clearable @on-search="onSearchBtn" />
					<jk-search-input v-model="searchParams.machineNameOrCode" placeholder="机台名称" :size="size" class="search-bar-item-size2 margin-5-0 item-gap" clearable @on-search="onSearchBtn" />
					<jk-search-button :size="size" class="item-gap" @click="onSearchBtn"></jk-search-button>
					<jk-more-search :size="size" @on-confirm="onSearchBtn" @on-reset="onResetSearchBtn">
						<el-row :gutter="16" class="flex-start-center-wrap">
							<el-col :span="12">
								<jk-search-input v-model="moreSearchParams.productOrderCode" placeholder="生产订单" :size="size" class="width-100-percent margin-5-0" clearable @on-enter="onSearchBtn" />
							</el-col>
							<el-col :span="12">
								<jk-search-input v-model="moreSearchParams.batchCode" placeholder="批号" :size="size" class="width-100-percent margin-5-0" clearable @on-enter="onSearchBtn" />
							</el-col>
							<el-col :span="12">
								<jk-search-input v-model="moreSearchParams.prdNoticeCode" placeholder="生产通知单号" :size="size" class="width-100-percent margin-5-0" clearable @on-enter="onSearchBtn" />
							</el-col>
							<el-col :span="12">
								<jk-search-input v-model="moreSearchParams.code" placeholder="任务单号" :size="size" class="width-100-percent margin-5-0" clearable @on-enter="onSearchBtn" />
							</el-col>
							<el-col :span="12">
								<jk-select v-model="moreSearchParams.priorityId" :option-list="priorityList" placeholder="优先级" clearable :size="size" class="margin-5-0 width-100-percent"></jk-select>
							</el-col>
						</el-row>
					</jk-more-search>
				</div>
			</div>
		</jk-operation-card>
		<el-row ref="box3" :gutter="10">
			<el-col :span="12">
				<div class="process-box head-process-box">
					<div class="process-box-head process-box-head-sm">
						<span>梳棉</span>
						<div v-if="isBatch">
							<el-button v-if="searchParams.openingState === 2" :size="batchBtnSize" :disabled="!getProcessCheckCount(['SM'])" type="warning" @click="onBatchUnRenovationBtn(['SM'])">批量取消翻改({{ getProcessCheckCount(['SM']) }})</el-button>
							<el-button v-if="searchParams.openingState === 3" :size="batchBtnSize" :disabled="!getProcessCheckCount(['SM'])" type="warning" @click="onBatchUnOpenBtn(['SM'])">批量取消开台({{ getProcessCheckCount(['SM']) }})</el-button>
							<el-button v-if="searchParams.openingState === 4" :size="batchBtnSize" :disabled="!getProcessCheckCount(['SM'])" type="warning" @click="onBatchUnCloseBtn(['SM'])">取消了机({{ getProcessCheckCount(['SM']) }})</el-button>
							<el-button v-if="[1, 2].includes(searchParams.openingState)" :size="batchBtnSize" :disabled="!getProcessCheckCount(['SM'])" type="success" @click="onBatchOpenBtn(['SM'])">批量开台({{ getProcessCheckCount(['SM']) }})</el-button>
							<el-button v-if="searchParams.openingState === 3" :size="batchBtnSize" :disabled="!getProcessCheckCount(['SM'])" type="primary" @click="onBatchCloseBtn(['SM'])">批量了机({{ getProcessCheckCount(['SM']) }})</el-button>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="process-box head-process-box">
					<div class="process-box-head process-box-head-bt">
						<span>并条</span>
						<div v-if="isBatch">
							<el-button v-if="searchParams.openingState === 2" :size="batchBtnSize" :disabled="!getProcessCheckCount(btProcessCodes)" type="warning" @click="onBatchUnRenovationBtn(btProcessCodes)">批量取消翻改({{ getProcessCheckCount(btProcessCodes) }})</el-button>
							<el-button v-if="searchParams.openingState === 3" :size="batchBtnSize" :disabled="!getProcessCheckCount(btProcessCodes)" type="warning" @click="onBatchUnOpenBtn(btProcessCodes)">批量取消开台({{ getProcessCheckCount(btProcessCodes) }})</el-button>
							<el-button v-if="searchParams.openingState === 4" :size="batchBtnSize" :disabled="!getProcessCheckCount(btProcessCodes)" type="warning" @click="onBatchUnCloseBtn(btProcessCodes)">取消了机({{ getProcessCheckCount(btProcessCodes) }})</el-button>
							<el-button v-if="[1, 2].includes(searchParams.openingState)" :disabled="!getProcessCheckCount(btProcessCodes)" :size="batchBtnSize" type="success" @click="onBatchOpenBtn(btProcessCodes)">批量开台({{ getProcessCheckCount(btProcessCodes) }})</el-button>
							<el-button v-if="searchParams.openingState === 3" :size="batchBtnSize" :disabled="!getProcessCheckCount(btProcessCodes)" type="primary" @click="onBatchCloseBtn(btProcessCodes)">批量了机({{ getProcessCheckCount(btProcessCodes) }})</el-button>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="process-box head-process-box">
					<div class="process-box-head process-box-head-cs">
						<span>粗纱</span>
						<div v-if="isBatch">
							<el-button v-if="searchParams.openingState === 2" :size="batchBtnSize" :disabled="!getProcessCheckCount(['CS'])" type="warning" @click="onBatchUnRenovationBtn(['CS'])">批量取消翻改({{ getProcessCheckCount(['CS']) }})</el-button>
							<el-button v-if="searchParams.openingState === 3" :size="batchBtnSize" :disabled="!getProcessCheckCount(['CS'])" type="warning" @click="onBatchUnOpenBtn(['CS'])">批量取消开台({{ getProcessCheckCount(['CS']) }})</el-button>
							<el-button v-if="searchParams.openingState === 4" :size="batchBtnSize" :disabled="!getProcessCheckCount(['CS'])" type="warning" @click="onBatchUnCloseBtn(['CS'])">取消了机({{ getProcessCheckCount(['CS']) }})</el-button>
							<el-button v-if="[1, 2].includes(searchParams.openingState)" :size="batchBtnSize" :disabled="!getProcessCheckCount(['CS'])" type="success" @click="onBatchOpenBtn(['CS'])">批量开台({{ getProcessCheckCount(['CS']) }})</el-button>
							<el-button v-if="searchParams.openingState === 3" :size="batchBtnSize" :disabled="!getProcessCheckCount(['CS'])" type="primary" @click="onBatchCloseBtn(['CS'])">批量了机({{ getProcessCheckCount(['CS']) }})</el-button>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<article class="machine-list-box" :style="{ height: `${tableHeight + 130}px` }">
			<div class="machine-list-box-inner">
				<el-row :gutter="10">
					<el-col :span="12">
						<div class="process-box flex-start-center-wrap" style="padding-left: 11px;padding-right: 11px;">
							<div
								v-for="(item) in smList"
								:key="item.id"
								:span="4"
								style="width: calc(100%/5);padding: 0 5px;"
							>
								<div class="machine-item" :style="{ borderColor: isCheck(item) ? '#2d8cf0' : '' }" @click="onClickBtn(item)">
									<div class="machine-item-head" :style="{ background: isCheck(item) ? '#2d8cf0' : '#e8eaec', color: isCheck(item) ? '#fff' : '' }">
										<span>{{ item.machineName }}</span>
										<div v-if="isBatch" class="custom-checkbox">
											<span v-if="isCheck(item)" class="el-icon-check"></span>
										</div>
									</div>
									<div class="machine-item-content">{{ item.productName || 0 }}</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="process-box">
							<el-row :gutter="10">
								<el-col
									v-for="(item) in btList"
									:key="item.id"
									:span="12"
								>
									<div class="machine-item" :style="{ borderColor: isCheck(item) ? 'rgba(114, 46, 209, .6)' : '' }" @click="onClickBtn(item)">
										<div class="machine-item-head" :style="{ background: isCheck(item) ? 'rgba(114, 46, 209, .6)' : '#e8eaec', color: isCheck(item) ? '#fff' : '' }">
											<span>{{ item.machineName }}</span>
											<div v-if="isBatch" class="custom-checkbox">
												<span v-if="isCheck(item)" class="el-icon-check"></span>
											</div>
										</div>
										<div class="machine-item-content">{{ item.productName || 0 }}</div>
									</div>
								</el-col>
							</el-row>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="process-box">
							<el-row :gutter="10">
								<el-col
									v-for="(item) in csList"
									:key="item.id"
									:span="12"
								>
									<div class="machine-item" :style="{ borderColor: isCheck(item) ? 'rgb(245, 108, 108)' : '' }" @click="onClickBtn(item)">
										<div class="machine-item-head" :style="{ background: isCheck(item) ? 'rgb(245, 108, 108)' : '#e8eaec', color: isCheck(item) ? '#fff' : '' }">
											<span>{{ item.machineName }}</span>
											<div v-if="isBatch" class="custom-checkbox">
												<span v-if="isCheck(item)" class="el-icon-check"></span>
											</div>
										</div>
										<div class="machine-item-content">{{ item.productName || 0 }}</div>
									</div>
								</el-col>
							</el-row>
						</div>
					</el-col>
				</el-row>
			</div>
		</article>

		<!-- 分页组件 -->
		<footer ref="box4" class="flex-end-center margin-top-10">
			<jk-page
				:page-index="searchParams.pageNo"
				:page-sizes="searchParams.pageSizes"
				:page-size="searchParams.pageSize"
				:total="totalCount"
				@on-change="onPageChange"
			/>
		</footer>
		<open-dialog
			:operation-type="2"
			:select-machine-item="selectMachineItem"
			:dialog-state="openDialogState"
			@on-visible-change="onVisibleChangeOfOpenDialog"
			@on-confirm="onConfirmChangeOfOpenDialog"
		></open-dialog>
		<close-dialog
			:select-machine-item="selectMachineItem"
			:dialog-state="closeDialogState"
			@on-visible-change="onVisibleChangeOfCloseDialog"
			@on-confirm="onConfirmChangeOfCloseDialog"
		></close-dialog>
		<open-again-dialog
			:operation-type="2"
			:select-machine-item="selectMachineItem"
			:dialog-state="openAgainDialogState"
			@on-visible-change="onVisibleChangeOfOpenAgainDialog"
			@on-confirm="onConfirmChangeOfOpenAgainDialog"
		></open-again-dialog>

		<batch-open-dialog
			:machine-list="checkProcessArr"
			:dialog-state="batchOpenDialogState"
			@on-visible-change="onVisibleChangeOfBatchOpenDialog"
			@on-confirm="onConfirmChangeOfBatchOpenDialog"
		></batch-open-dialog>
		<batch-close-dialog
			:machine-list="checkProcessArr"
			:dialog-state="batchCloseDialogState"
			@on-visible-change="onVisibleChangeOfBatchCloseDialog"
			@on-confirm="onConfirmChangeOfBatchCloseDialog"
		></batch-close-dialog>
		<schedule-shift-yield-drawer
			:drawer-state="drawerState"
			@on-visible-change="onVisibleChangeOfScheduleShiftYieldDrawer"
		></schedule-shift-yield-drawer>
	</div>
</template>

<script>
    import calHeight from '/src/mixins/cal-table-height';
    import handlerCache from '../../../../../mixins/handler-cache';
    import closeDialog from '../close-dialog';
    import openDialog from '../open-dialog';
    import batchOpenDialog from '../batch-open-dialog';
    import batchCloseDialog from '../batch-close-dialog';
    import openAgainDialog from '../open-agai-dialog';
    import permissionMixin from '../../../../../mixins/permission-mixin';
    import mx from './mixin';
    import scheduleShiftYieldDrawer from '../schedule-shift-yield-drawer';
    export default {
        name: 'ProductOpenCloseMachine',
        components: {
            scheduleShiftYieldDrawer,
            batchCloseDialog,
            batchOpenDialog,
            closeDialog,
            openDialog,
            openAgainDialog
        },
        mixins: [calHeight, handlerCache, permissionMixin, mx],
        data() {
            return {
            };
        },
        methods: {
            onVisibleChangeOfScheduleShiftYieldDrawer(e) {
                this.drawerState = e;
            },
            /** 查询列表 */
            getListRequest() {
                // this.checkArr = [];
                // this.smList = [];
                // this.btList = [];
                // this.csList = [];
                this.tableLoading = true;
                const params = { ...JSON.parse(JSON.stringify(this.moreSearchParams)), ...JSON.parse(JSON.stringify(this.searchParams)) };
                params.processCodes = ['SM', 'BT', 'TB', 'EB', 'MB', 'CS'];
                this.getStateBarCountRequest(params);
                this.apiItem.page(params).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.smList = res.data.res.filter(x => x.processCode.toUpperCase() === 'SM').sort((a, b) => {
                            return a.sortNum - b.sortNum;
                        });
                        this.btList = res.data.res.filter(x => this.btProcessCodes.includes(x.processCode.toUpperCase())).sort((a, b) => {
                            return a.sortNum - b.sortNum;
                        });
                        this.csList = res.data.res.filter(x => x.processCode.toUpperCase() === 'CS').sort((a, b) => {
                            return a.sortNum - b.sortNum;
                        });
                        const arr = [
                            ...this.smList,
                            ...this.btList,
                            ...this.csList
                        ];
                        this.checkArr = arr.filter(x => this.checkArr.map(k => k.id).includes(x.id));
                        this.totalCount = res.data.count;
                    }
                });
            }
        }
    };
</script>
<style scoped lang="scss">
@import "big-screen";
</style>
